class MobileLabelPush extends React.Component {
    constructor(props) {
        super(props);
        this.pageCount = 0;
        this.state = {
            list: [''],
            inputValues: {
                title: '',
                content: '',
                comms: 'mobile'
            }
        }
    }

    componentDidMount() {
        this.verify = {
            name: function (value) {
                if (value.length < 2) {
                    return '标题至少得2个字符!';
                }
            },
            type: function (value) {
                if (value.length < 2) {
                    return '内容至少得2个字符!';
                }
            }
        };
        this.refs.table.refresh();
    }

    inputChange(type, value) {
        this.state.inputValues[type] = value;
        this.setState({});
    }

    btnSubmit() {
        this.state.inputValues.type = 2;
        postJson("/NoticeCtrl/addNotice.x", this.state.inputValues, (data) => {
            console.log("data", data);
            layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;添加成功', {icon: 6});
            this.refs.table.refresh();
            this.refs.modal_add.close();
        });
    }

    updateList(page, pageSize) {
        let param = {};
        param.pageSize = pageSize;
        param.page = page;
        param.commCode = "mobile";
        postJson("/NoticeCtrl/queryNoticePage.x", $.param(param), (data) => {
            console.log("data", data)
            let list = data.list;
            this.pageCount = data.size;
            this.setState({
                list: list
            });
        });
    }

    search() {
        this.refs.table.refresh();
    }

    addNotice() {
        this.refs.modal_add.show();
    }

    endCallback() {
        this.setState({
            inputValues: {
                title: '',
                content: '',
                comms: 'mobile'
            }
        });
    }

    render() {
        return <Frame header="手机全量推送" headerBtns={
            <HeaderBtn onClick={() => this.addNotice()}><i className="fa fa-plus"/>&nbsp;
                添加推送</HeaderBtn>
        }>
            <Form type="pane">
                <Table ref="table" count={this.pageCount}
                       pageOnClick={(page, pageSize) => this.updateList(page, pageSize)}>
                    <colgroup>
                        <col/>
                        <col/>
                        <col/>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>标题</th>
                        <th>发布时间</th>
                        <th>发布内容</th>
                    </tr>
                    </thead>
                    <tbody>
                    {

                        this.state.list.map((array) => {
                            return <tr>
                                <td>{array.titile}</td>
                                <td>{array.create_time}</td>
                                <td>{array.context}</td>
                            </tr>
                        })
                    }
                    </tbody>
                </Table>
            </Form>

            <Modal
                area={['800px']}
                title="添加推送"
                ref="modal_add"
                endCallback={() => this.endCallback()}>
                <Form type="pane" verify={() => {
                    return this.verify;
                }}>
                    <Item>
                        <Label>推送标题</Label>
                        <Input type="text"
                               block={true}
                               value={this.state.inputValues.title}
                               lay-verify="title"
                               onChange={(value) => this.inputChange('title', value)}
                               placeholder="请输入描述"
                        />
                    </Item>
                    <Item className="layui-form-item layui-form-text">
                        <Label>推送内容</Label>
                        <Textarea lay-verify="content" name="content" ref="content"
                                  value={this.state.inputValues.content}
                                  onChange={(value) => this.inputChange('content', value)}/>
                    </Item>
                    <Item>
                        <Button formBtn={true}
                                btnType='normal'
                                onClick={() => this.btnSubmit()}>确定推送</Button>
                    </Item>
                </Form>
            </Modal>
        </Frame>
    }
}

ReactDOM.render(
    <MobileLabelPush/>,
    document.getElementById('root')
);
